<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Index</title>

    <!-- Bootstrap核心CSS -->
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="bootstrap/css/bootstrap-theme.css" rel="stylesheet">

    <link href="css/main.css" rel="stylesheet">

    <script src="js/plug/jquery.js"></script>
    <script src="js/plug/jquery.pin.js"></script>
    
    <script src="bootstrap/js/bootstrap.js"></script>
       
    <script src="js/index.js"></script>
    <script src="js/main.js"></script>

</head>

<body style="padding-top: 50px;" data-spy="scroll" data-target="#menu">
    <nav class="navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation" id ="menu">
        <div class="navbar-header col-sm-offset-1">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu-collapse">
                <span class="sr-only">Menu</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.html">Megend</a>
        </div>

       <div class="collapse navbar-collapse" id="navbar-menu-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="index.html">Index</a></li>
                <li><a href="search.html">Search</a></li>
                <li><a href="edit.html">Edit</a></li>
                <li><a href="about.html">About</a></li>
            </ul>
           
        </div>

    </nav>


    <div class="jumbotron">
        <h1>Hello, world!</h1>
        <p>Chochy，我的爱人！</p>
    </div>

    <div style="height: 5000px;" class="container" id ="index">

        <div class ="col-sm-4 col-md-3 col-sm-push-8  col-md-push-9" >
            <div id="div_left"> 
                <div class="input-group has-success">
                    <input type="text" class="form-control" id="inputWarning" placeholder ="搜索">
                    <span class="input-group-btn">
                        <button class="btn btn-success" type="button">Go</button>
                    </span>
                </div>
                <br />

                <div class="panel panel-success hidden-xs">
                    <div class="panel-heading">标签</div>
                    <div class="panel-body pointer">
                        <span class="label label-default">原创</span>
                        <span class="label label-primary">IT</span>
                        <span class="label label-success">软件</span>
                        <span class="label label-info">分享</span>
                        <span class="label label-warning">技术</span>
                    </div>
                </div>



                <div class="panel panel-success pointer hidden-xs" id="div_a">
                    <div class="panel-heading">类别分类</div>
                    <a  class="list-group-item active" data-name ="home" >全部<span class="badge">14</span></a>
                    <a  class="list-group-item" data-name ="profile">IT新闻<span class="badge">14</span></a>
                    <a  class="list-group-item" data-name ="messages">软件更新<span class="badge">14</span></a>
                    <a  class="list-group-item" data-name="settings">技术文档<span class="badge">14</span></a>
                    <a  class="list-group-item">原创文档<span class="badge">14</span></a>
                </div>

                <div class="panel panel-success pointer hidden-xs">
                    <div class="panel-heading">阅读排行榜</div>
                    <a  class="list-group-item" data-toggle="popover" data-trigger="hover" data-placement="left"  data-content="And here's some amazing content. It's very engaging. right?">全部全部全部全部全部</a>
                    <a  class="list-group-item" data-toggle="popover" data-trigger="hover" data-placement="left"  data-content="And here's some amazing content. It's very engaging. right?">全部全部全部全部全部全部全部全部全部</a>
                    <a  class="list-group-item" data-toggle="popover" data-trigger="hover" data-placement="left"  data-content="And here's some amazing content. It's very engaging. right?">软件更新软件更新软件更新软件更新</a>
                    <a  class="list-group-item" data-toggle="popover" data-trigger="hover" data-placement="left"  data-content="And here's some amazing content. It's very engaging. right?">技术文档技术文档技术文档技术文档技术文档技术文档技术文档技术文档</a>
                    <a  class="list-group-item" data-toggle="popover" data-trigger="hover" data-placement="left"  data-content="And here's some amazing content. It's very engaging. right?">技术文档技术文档技术文档</a>
                </div>
            </div>
        </div>



        <div class ="col-sm-8 col-md-9 col-sm-pull-4  col-md-pull-3">
            <ul class="nav nav-tabs" id="ul_tab">
                <li class ="active"><a href="#home" data-toggle="tab">全部</a></li>
                <li><a href="#profile" data-toggle="tab">IT新闻</a></li>
                <li><a href="#messages" data-toggle="tab">软件更新</a></li>
                <li><a href="#settings" data-toggle="tab">技术文档</a></li>
            </ul>

            <div class="tab-content">
                <div class="tab-pane fade in active " id="home">

                    <h3 ><a class ="text-muted" href="content.html">List group item heading</a></h3>
                    <p class="text-primary">List group item headingList group item headingList group item headingList group item headingList group item headingList group item headingList group item headingList group item headingList group item headingList group item headingList group item headingList group item heading………… <a href="">更多</a></p>
                    <p class="text-success text-right ellipsis-p">发表时间：<strong>2013/10/05 20:35</strong> 阅读次数：<strong>35</strong>次 回复次数：<strong>10</strong>次</p>
                    <hr>
                    <h3 class ="text-muted">List group item heading</h3>
                    <p class="text-primary">List group item headingList group item headingList group item heading</p>
                    <p class="text-warning"><span>发表时间:2013/10/05 20:35</span> <span>阅读次数:35次</span> <span>回复次数:10次</span></p>
                    <hr>
                    <h3 class ="text-muted">List group item heading</h3>
                    <p class="text-primary">List group item headingList group item headingList group item heading</p>
                    <p class="text-info">发表时间：<em>2013/10/05 20:35</em> 阅读次数：<em>35</em>次 回复次数：<em>10</em>次</p>
                    <hr>


                </div>
                <div class="tab-pane fade" id="profile">



                </div>
                <div class="tab-pane fade" id="messages">



                </div>
                <div class="tab-pane fade" id="settings">




                </div>
            </div>
        </div>

    </div>


    <div  id="footer">

        <p class="text-center">设计&amp;开发 <a href="mailto:chohcy@foxmail.com">Chochy</a></p>
        <p class="text-center">&copy; 2013 By <a href="mailto:chohcy@foxmail.com">Chochy</a></p>

    </div>

    <a id="top" style="position: fixed;bottom: 150px;right: 8px; display: none;" class ="btn btn-success btn-xs" >TOP</a>
</body>
</html>
